<template>
  <div class="management-contents margin-auto">
    <div class="content-text mt50 mb20">文章标题</div>
    <input type="text" class="titleTag" v-model="titleTag" placeholder="请输入文章标题">
    <div class="content-text mt20 mb20">文章编写</div>
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>
    <div class="content-text mt20 mb20">标签选择</div>
    <div class="tags-box">
      <div class="tag mr15" v-for="item in tagsArray" :class="{checkTags : item.tagCheck}" :key="item.tag_id" @click="changeTags(item.tag_id, item.tag_name)">
        {{item.tag_name}}
      </div>
    </div>
    <div class="save-cancle">
      <div class="save mr10" @click="save">保存</div>
      <div class="cancle">取消</div>
    </div>
  </div>
</template>
<script>
  import { quillEditor } from 'vue-quill-editor'
  export default{
      data(){
          return {
              content:null,
              editorOption:{},
              msgs: {},
              // 标签数组
              tagsArray: [],
              // 博文数组
              blogArray: [],
              // 当前tag
              currentSelectTag: [],
              currentSelectTagText: [],
              // flag
              flag: 0,
              // 文章标题
              titleTag: ''
          }
      },
      mounted() {
        this.getTagsInfo()
      },
      computed: {

      },
      methods:{
          onEditorBlur(){//失去焦点事件
            console.log(this.content)
          },
          onEditorFocus(){//获得焦点事件

          },
          onEditorChange(){//内容改变事件

          },
          getTagsInfo() {
            this.$post('/post-tags')
            .then((response) => {
              this.tagsArray = response.data
              this.tagsArray.forEach((elem) => {
                elem.tagCheck = false
              })
            })
            this.$post('/post-index')
            .then((response) => {
              this.blogArray = response.data
            })
          },
          // 选择tags
          changeTags(id, name) {
            this.tagsArray.forEach((elem) => {
              if(elem.tag_id === id) {
                elem.tagCheck = !elem.tagCheck
                this.currentSelectTag.push(id)
                this.currentSelectTagText.push(name)
              }
            })
            this.tagsArray = Object.assign([], this.tagsArray)
          },
          // 整理参数
          tidyInfo() {

          },
          save() {
            console.log(this.currentSelectTag)
            if(this.currentSelectTag.length === 0) {
              alert('请选择标签')
              return;
            } else if(this.titleTag === '') {
              alert('请填写标题')
              return
            } else if(this.content === '') {
              alert('请填写文章')
              return
            }
            let data = {
              content: this.htmlspecialchars(this.content),
              tags: this.currentSelectTagText.join(','),
              postId: this.blogArray[this.blogArray.length - 1].postId + 1,
              title: this.titleTag,
              time: new Date().getTime()
            }
            // console.log(data)
            this.$post('/post-insert', data)
            .then((response) => {
              this.msgs = response.data
              alert('保存成功')
            })
          },
          // 富文本转换 htmlspecialchars
          htmlspecialchars(str) {
            let s = "";
            if (str.length == 0) return "";
              s = str.replace(/&/g,"&amp;");
              s = s.replace(/</g,"&lt;");
              s = s.replace(/>/g,"&gt;");
              s = s.replace(/ /g,"&nbsp;");
              s = s.replace(/\'/g,"&#39;");
              s = s.replace(/\"/g,"&quot;");
              return s;
          },
          // 富文本解密
          htmlspecialchars_decode(str){
            let s = "";
            if(str.length == 0) return "";
            s = str.replace(/&amp;/g,"&");
            s = s.replace(/&lt;/g,"<");
            s = s.replace(/&gt;/g,">");
            s = s.replace(/&nbsp;/g," ");
            s = s.replace(/&#39;/g,"\'");
            s = s.replace(/&quot;/g,"\"");
            return s;
          }
      }
  }
</script>

<style lang="less" scoped>
.management-contents{
  width: 80%;
  min-height: 400px;
  position: absolute;
  top: 0;
  left: calc((100% - 1024px)/2);
  .titleTag{
    width: calc(100% - 10px);
    height: 40px;
    font-size: 16px;
    outline: none;
    background-color: transparent;
    border: 1px solid #ccc;
    padding-left: 10px;
  }
  .tags-box{
    width: 100%;
    min-height: 80px;
    .tag{
      display: inline-block;
      padding: 10px;
      width: auto;
      border: 1px solid #eeeeee;
      border-radius: 5px;
      -webkit-transition-property: background-color;
      -webkit-transition-duration: 0.5s;
      -webkit-transition-timing-function: ease;
      svg{
        display: none;
      }
    }
    .tag:hover{
      cursor:pointer;
      background-color: #efefee;
    }
    .checkTags{
      background-color: #dddddd
    }
  }
  .content-text{
    font-size: 18px;
  }
  .save-cancle{
    width: 100%;
    height: 50px;
    text-align: center;
    div{
      display: inline-block;
      text-align: center;
      width: 100px;
      height: 40px;
      line-height: 40px;
      border: 1px solid #dddddd;
      border-radius: 8px;
      opacity: .7;
    }
    div:hover{
      opacity: 1;
      cursor: pointer;
    }
  }
}
</style>

